<template>
	<view>
		<view class="form">
			<view class="form_item">
				<view class="title">头像</view>
				<view style="display: flex;align-items: center;">
					<image @tap='chooseImage()' :src="userInfo.image" class="avatar" style="width: 30px;height: 30px;border-radius: 50%;"></image>
					<image class="icon_arrow" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/right_arrow.png"></image>
				</view>
			</view>
			
			<view class="form_item" @click="showModal()">
				<view class="title">姓名</view>
				<view style="display: flex;align-items: center;font-size: 28rpx;">
					{{userInfo.nickName}}
				    <image class="icon_arrow" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/right_arrow.png"></image>
				</view>
			</view>
			
			<view class="form_item">
				<view class="title">性别</view>
				<view style="display: flex;align-items: center;font-size: 28rpx;">
					<radio-group class="box" @change="radioChange">
						<label class="box" style="margin-left: 15rpx;" v-for="(item, index) in items" :key="item.value">
							<view class="box">
								<radio color="#FF5551" :value="item.value" :checked="index === current" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
			</view>
			
			<view class="form_item">
				<view class="title">实名认证</view>
				<view style="display: flex;align-items: center;font-size: 28rpx;" v-if="userInfo.isAuth === 1">已认证
				    <image class="icon_arrow" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/right_arrow.png"></image>
				</view>
				<view style="display: flex;align-items: center;font-size: 28rpx;" v-if="userInfo.isAuth === 0" @click="goCert()">未认证
				    <image class="icon_arrow" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/right_arrow.png"></image>
				</view>
			</view>
			
			<!-- <view class="form_item" @click="goEmergency()">
				<view class="title">紧急联系人</view>
				<view style="display: flex;align-items: center;">
					{{emergency_contact}} <text style="margin-left:10px;">{{emergency_tel}}</text>
					<image class="icon_arrow" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/right_arrow.png"></image>
				</view>
			</view> -->
			
			<view class="btn1" @tap='save()'>
				保存信息
			</view>
		</view>
		<view class="">
			<kps-image-cutter @ok="onok" @cancel="oncancle" :url="url" :fixed="true" :width="200"
				:height="200"></kps-image-cutter>
		</view>
		<l-modal ref="customModal" modalTitle="姓名" @onClickCancel="cancel" @onClickConfirm="confirm">
			<template>
				<input placeholder="请输入姓名" v-model="userInfo.nickName" style="background-color: #F2F2F2;height:40px;padding:10px;border-radius: 6px;width:100%;box-sizing: border-box;"/>
			</template>
		</l-modal>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import lModal from '@/components/l-modal/l-modal.vue'
	import kpsImageCutter from "@/components/ksp-image-cutter/ksp-image-cutter.vue";
	export default {
	    components: {
	        lModal,
			kpsImageCutter
	    },
		computed: mapState(['userInfo','loginState']),
		data() {
			return {
				name:'用户名',
				avatar:'https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/tmp/a1.png',
				emergency_tel:'13545671234',
				emergency_contact:'王先生',
				items: [{
						value: '1',
						name: '男'
					},
					{
						value: '2',
						name: '女',
						checked: 'true'
					},
				
				],
				current: 3,
				userInfo:{},
				checkActive: '',
				checkActive2: '',
				path:'',
				url:''
			}
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				this.$api.getUserInfo().then((res) => {
				let userInfo = res.data.dataMap
				if (userInfo != null) {
					this.userInfo = userInfo
					this.current = Number(this.userInfo.sex)-1
					}
				})
			},
			radioChange: function(evt) {
				this.userInfo.sex = evt.detail.value
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.target.value) {
						this.current = i;
						break;
					}
				}
			
			
			},
			onok(ev) {
				let _this = this
				this.path = ev.path;
				this.url = "";
				console.log(JSON.stringify(this.path))
				uni.uploadFile({
					url: "https://app.xiangban365.com/app_mobile/" + "upload/file", //仅为示例，非真实的接口地址
					filePath: this.path,
					name: 'file',
					header: {
						ContentType: "image/jpg"
					},
					formData: {
						'user': 'test'
					},
					success: function(uploadFileRes) {
						let data = JSON.parse(uploadFileRes.data)
						console.log(data.dataMap)
						_this.userInfo.image = data.dataMap
						console.log("------" + _this.image)
					}
				});
			},
			chooseImage() {
			    uni.chooseImage({
			        success: (res) => {
			            // 设置url的值，显示控件
			            this.url = res.tempFilePaths[0];
			        }
			    });
			},
			save(){
				this.$api.updateUserInfo(this.userInfo).then((res) => {
					if(res.data.code==200){
						uni.showToast({
							title: '保存成功',
							duration: 1000,
							icon: 'none'
						})
						setTimeout(function() {
							// uni.switchTab({
							// 	url:'user'
							// })
							uni.navigateBack({
								delta: 1
							});
						}, 1000);
					}
				})
			},
			goCert(){
			    uni.navigateTo({
			    	url:"cert"
			    })	
			},
			goEmergency(){
				uni.navigateTo({
					url:"emergency"
				})	
			},
			showModal(){
				this.$refs['customModal'].showModal()
			},
			cancel() {
				// do sth
			},
			confirm() {
				// do sth
			}
		}
	}
</script>

<style lang="scss">
	.box{
		display: flex;
		align-items: center;
	}
	radio-group{
		padding-right:30rpx ;
	}
.uni-radio-wrapper{transform: scale(0.7);}
.form{background-color: white;margin-top:10px;}
  .form_item{
	  border-bottom: 1px solid #EEEEEE;
	  padding:0 10px;
	  height: 100rpx;
	  display: flex;
	  justify-content: space-between;
	  align-items:center;
	  .title{font-weight: bold;color:#333333;font-size: 30rpx;}
  }
  
  .btn1{
     background-color: #FF5533;
     border-radius:50px;
     // padding: 10px;
	 height: 88rpx;
	 line-height: 88rpx;
     width: 85%;
     margin: 50px auto;
     color: #fff;
     font-size: 32rpx;
	 text-align: center;
    }
</style>
